<template>
  <!-- 底部导航 -->
  <div class="footer_nav flex justify-between align-center text-center">
    <div
      v-for="(item, indexs) in list"
      :key="indexs"
      @click="footerChange(item.images_url, indexs)"
      :class="[index==indexs ? '':'hui_4_4_html','footer_item flex flex-column justify-around']"
    >
      <div class="friend_account" v-show="indexs == 4 && friend_account">{{friend_account}}</div>
      <div :class="[indexs==2?'footer_main':'', 'footer_center']">
        <img :class="[indexs==2?'footer_main_img':'']" :src="item.thumb" alt />
      </div>
      <div class="footer_title" v-html="item.images_name">{{item.images_name}}</div>
    </div>
    <!--  -->
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number
    }
  },
  data() {
    return {
      index: this.active,
      list: [],
      friend_account: 0
    };
  },
  watch: {
    active(n) {
      this.index = this.active;
    }
  },
  mounted() {
    this.$axios.post("/wap/config/index", {}).then(res => {
      this.list = res.data.data;
    });
    if(localStorage.getItem('token')){
      this.getFriendNum();
    }
  },
  methods: {
    footerChange(path, indexs) {
      // 如果没有登录的时候进入个人中心
      if (!window.localStorage.getItem("token") && path == "/recruit/mine") {
        this.$router.push({
          path: "/recruit/login/"
        });
        return false;
      }

      let userId = localStorage.getItem('user_id') ? localStorage.getItem('user_id') : '0'

      if (indexs == 2 || indexs == 3) {
        window.open(path + '?userId=' + userId , "_blank");
        return false;
      }

      this.$router.push({
        path: path
      });
    },
    getFriendNum() {
      this.$axios
        .post("/wap/personal/card", {
          token: localStorage.getItem("token"),
          type: 1
        })
        .then(res => {
          this.friend_account = res.data.data.friend_account;
        });
    }
  }
};
</script>
<style scoped>
.friend_account {
  right: 0.2rem;
  top: 0.05rem;
}
.footer_nav {
  max-width: 600px;
  width: 100%;
  background: white;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1rem;
  line-height: 1.6;
}
/*  */
.footer_nav img {
  width: 0.32rem;
  height: 0.32rem;
  object-fit: cover;
  display: inline-block;
}
.footer_nav > div {
  width: 20%;
}
.footer_item {
  height: 100%;
  position: relative;
}
.footer_title {
  font-size: 0.24rem;
}
.footer_center {
  filter: none;
  height: 80%;
  position: relative;
}

.footer_nav .footer_main {
  position: relative;
}

.footer_nav .footer_main_img {
  width: 1rem;
  height: 1rem;
  transform: translateX(-50%) !important;
  filter: none !important;
  position: absolute;
  top: -64%;
  left: 50%;
  border-radius: 50%;
  background: white;
  border: 5px solid white;
}
</style>